<template>
	<view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				background:'#fff'
			}">
				<view class="action">
					<text class="wlIcon-fanhui1" @tap="$wanlshop.back(1)"></text>

					<view class="actionName" v-if="head" @click="show = true">发帖至{{head}}</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="intConter">
			<view class="intConterInt">
				<input placeholder="填写标题会有更多赞~" class="int" v-model="title" />
			</view>
			<textarea class="area" placeholder="添加正文" v-model="content"></textarea>


		</view>
		<view class="settingFlex">
			<view class="settingFlexItem" v-for="(image,index) in images" :key="index">
				<image :src="image" class="rightLeftImg" @tap="previewImage1(images, index)" mode="aspectFill">
				</image>
				<view class="cu-tag bg-red" @tap.stop="close1(images,index)">
					<text class='wlIcon-shanchu2'></text>
				</view>
			</view>
			<view class="settingFlexItem" @tap="chooseImg()" v-if="images.length<9">
				<view class="iconfont icon-add"></view>
				<view>上传照片</view>
			</view>

		</view>

		<!-- 选择分享类目 -->
		<!-- <view class="bg"></view> -->
		<u-popup mode="bottom" v-model="show" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.9)'}"
			:mask-close-able="false">
			<!-- :mask-close-able="false" -->
			<view class="content" >
				<view class="popupText">和小伙伴分享些什么呐？</view>
				<scroll-view scroll-y="true" style="height: 60vh;">
					<view class="categoryContent">
						<view class="contentItem" v-for="(item,index) in categoryList" :key="index"
							@click="optionClick(item)">
							<image :src="$wanlshop.oss(item.image)" class="contentItemImg" mode="aspectFill"></image>
							<view class="contentItemText">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="iconfont icon-guanbi" @tap="jump()"></view>
			</view>
		</u-popup>
		<view class="footer">
			<view class="footerBtn" @click="entry()">发布笔记</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				categoryList: [],
				head: "",
				title: "",
				images: [], // 相册
				category_id: '',
				content: ''
			}
		},
		onLoad() {
			this.show = true
			this.categoryLists()
		},
		methods: {
			jump(){
				if(!this.head){
					this.$wanlshop.back(1)
				}else{
					this.show = false
				}
				
			},
			// 发布
			async entry() {
				let imageStr = ''
				if(this.images){
					imageStr = this.images.join(',')
				}
				await uni.request({
					url: '/addons/circle/api.index/add',
					method: 'post',
					data: {
						category_id: this.category_id,
						title: this.title,
						content: this.content,
						images:imageStr
					},
					success: res => {
						uni.showToast({
							title: '发布成功，等待审核',
							icon: 'none',
							position: true
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}
				});
			},
			previewImage1(image, index) {
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: index,
					indicator: 'number'
				});
			},
			chooseImg() { //选择图片
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: 1,
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data
													.storage == 'local' ?
													null : updata.data
													.multipart,
												success: data => {
													this.images.push(JSON
														.parse(data
															.data).data
														.fullurl)
												},
												fail: error => {
													this.$wanlshop.msg(JSON
														.parse(error
															.data).msg);
												}
											});
										}
									});
								}
							}
						});
					}
				})
			},
			close1(e) {
				this.images.splice(e, 1);
			},
			optionClick(item) {
				console.log(item)
				this.head = item.name
				this.category_id = item.id
				this.show = false
			},
			// 弹出层
			showClick() {
				this.show = true
			},
			// 金刚区
			async categoryLists() {
				await uni.request({
					url: '/addons/circle/api.index/category',
					method: 'post',
					data: {
						type: 'circle'
					},
					success: res => {
						console.log("res", res)
						this.categoryList = res.data
						if (this.categoryList.length > 9) {
							this.moreIndex = 9
							this.storeIndex = this.categoryList.length
						} else {
							this.moreIndex = this.categoryList.length
							this.storeIndex = this.categoryList.length
						}
						// this.dataList = res.data
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.actionName {
		font-size: 38rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
	}

	.intConter {
		padding: 30rpx 30rpx 0 30rpx;
		height: auto;

		.intConterInt {
			width: 100%;
			height: 64rpx;
			border-bottom: 1rpx solid #e4e4e4;

			.int {
				width: 100%;
				height: 64rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
			}
		}

		.area {
			width: 100%;
			height: 140rpx;
			padding: 26rpx 0;
			display: block;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}

	}

	.settingFlex {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 30rpx;

		.settingFlexItem {
			width: 180rpx;
			height: 180rpx;
			border: 2rpx dashed #888888;
			text-align: center;
			margin-left: 30rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #888888;
			position: relative;

			.iconfont {
				margin-top: 44rpx;
				margin-bottom: 22rpx;
			}

			.rightLeftImg {
				width: 100%;
				height: 100%;
			}

			.cu-tag {
				position: absolute;
				right: 0;
				top: 0;
				border-bottom-left-radius: 3px;
				padding: 3px 6px;
				height: auto;
				background-color: rgba(0, 0, 0, 0.5);
			}
		}
	}

	::v-deep .u-drawer-content {
		position: relative !important;
	}

	::v-deep .u-drawer-bottom {
		background: transparent !important;
	}
	::v-deep.u-mode-center-box{
			background-color: transparent !important;
		}
	.popupText {
		width: 550rpx;
		margin: 0 auto;
		margin-top: 210rpx;
		text-align: center;
		color: #fff;
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
	.categoryContent {
		width: 550rpx;
		height: 60vh;
		// display: flex;
		// flex-wrap: wrap;
		margin: 0 auto;

		.contentItem {
			width: 25%;
			height: auto;
			text-align: center;
			margin-top: 74rpx;
			display: inline-block;

			.contentItemImg {
				width: 72rpx;
				height: 72rpx;
				border-radius: 100%;
				margin: 0 auto;
			}

			.contentItemText {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				margin-top: 18rpx;
				color: #FAFAFA;
				/* 强制文字一行内显示 */
				white-space: nowrap;
				/* 超出部分隐藏 */
				overflow: hidden;
				/* 用省略号替代超出部分 */
				text-overflow: ellipsis;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 136rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;

		.footerBtn {
			width: 428rpx;
			height: 64rpx;
			background: #4CBD66;
			border-radius: 36rpx;
			text-align: center;
			line-height: 64rpx;
			margin: 30rpx auto;
			color: #fff;
		}
	}
	.icon-guanbi{
		font-size: 50rpx;
		display: block;
		text-align: center;
		color: #fff;
	}
</style>